<template>
	<view class="city">
		<template v-for="item in list">
			<view class="item" :key="item.type" v-if="item.children.length">
				<view class="title">
					{{item.type}}
				</view>
				<view class="content dpflex">
					<view class="citem" @click="changeCityBtn(item1)" v-for="item1 in item.children " :key="item1.id">
						{{item1.city_name}}
					</view>

				</view>
			</view>
		</template>

	</view>
</template>

<script>
	import {
		getCityList
	} from '@/api/home.js'
  
  import {mapMutations} from 'vuex'

	export default {
		data() {
			return {
				list: []
			};
		},
		methods: {
			...mapMutations(['changeCity']),
			// 点击城市
			changeCityBtn(item){
				this.changeCity(item.city_name)
				// this.$store.commit('changeCity',item.city_name)
				uni.navigateBack()
			},
			//
			async getList() {
				//获取后端返回的 600+ 数据
				let res = await getCityList()
                //组装一个 有 字母和 children 对象组成的数据
				let arr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('').map(item => ({
					type: item,
					children: []
				}))
                //双重循环 找children
				res.forEach(item => {
					arr.forEach(item1 => {
						// item.city_pre == item1.type  将item push到 item1.children中
						if (item.city_pre == item1.type) {
							item1.children.push(item)
						}
					})
				})
				//渲染到页面上.
				this.list = arr;
			}
		},
		created() {
			this.getList()
		}
	}
</script>

<style lang="scss">
	.city {
		width: 100%;
		height: 100%;
		background: #f6f6f6;
	}

	.title {
		padding-top: 30rpx;
		height: 60rpx;
		font-size: 40rpx;
		text-indent: 40rpx;
	}

	.content {
		width: 90%;
		margin: 0 auto;
		padding: 20rpx;
		flex-wrap: wrap;
		background: #fff;

		.citem {
			margin: 10rpx;
		}
	}
</style>